<template>
  <div class="siteOverview">
    <div class="collect">
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.power }}</div>
        <div class="collect-item-title">
          装机功率（MW）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.capacity }}</div>
        <div class="collect-item-title">
          装机容量（MWh）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.totalCharge }}</div>
        <div class="collect-item-title">
          总充电量（MWh）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.totalDischarge }}</div>
        <div class="collect-item-title">
          总放电量（MWh）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.totalIncome }}</div>
        <div class="collect-item-title">
          累计收益（万元）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
      <div class="collect-item">
        <div class="collect-item-value">{{ collectData.yesterdayIncome }}</div>
        <div class="collect-item-title">
          昨日收益（万元）
          <el-tooltip class="box-item" content="Bottom Center prompts info" placement="bottom">
            <el-icon>
              <QuestionFilled />
            </el-icon>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div class="earnings">
      <div class="header">
        <div class="title">
          <div class="line"></div>
          <div class="text">收益指标{{selectedValue}}</div>
        </div>
        <div class="conditions">
          <el-radio-group v-model="earningsTime" size="large">
            <el-radio-button v-for="item in times" :key="item.value" :label="item.label" :value="item.value" />
          </el-radio-group>
        </div>
      </div>
      <div class="cont">
        <ECharts :option="earningsOptions" class="earningsCharts" />
        <div class="ranking">
          <div class="title">
            <img src="@/assets/images/siteOverview/siteOverview_earnings_icon.png" alt="" />
            <span>收益排名</span>
          </div>
          <div class="content">
            <div v-for="(item, i) in rankingData" :key="i" class="ranking-item">
              <div class="ranking-item-sort">{{ i + 1 }}</div>
              <div class="ranking-item-name">{{ item.name }}</div>
              <div class="ranking-item-value">{{ item.value }}元/kWh</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="earnings electricQuantity">
      <div class="header">
        <div class="title">
          <div class="line"></div>
          <div class="text">电量指标</div>
        </div>
        <div class="conditions">
          <el-radio-group v-model="elQuanTime" size="large">
            <el-radio-button v-for="item in times" :key="item.value" :label="item.label" :value="item.value" />
          </el-radio-group>
        </div>
      </div>
      <div class="cont">
        <ECharts :option="elQuanOptions" class="earningsCharts elQuanCharts" />
      </div>
    </div>

    <div class="earnings efficiency">
      <div class="header">
        <div class="title">
          <div class="line"></div>
          <div class="text">系统效率</div>
        </div>
        <div class="conditions">
          <el-radio-group v-model="efficiencyTime" size="large">
            <el-radio-button v-for="item in times" :key="item.value" :label="item.label" :value="item.value" />
          </el-radio-group>
        </div>
      </div>
      <div class="cont">
        <ECharts :option="efficiencyOptions" class="earningsCharts efficiencyCharts" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRoute, LocationQueryValue } from 'vue-router'
import ECharts from '@/components/ECharts.vue'

const route = useRoute()
const selectedValue = ref<LocationQueryValue | LocationQueryValue[] | null>(null)

watch(
  () => route.query.selected,
  (newValue) => {
    selectedValue.value = newValue
    console.log(selectedValue.value)
  },
  { immediate: true }
)

const collectData = ref({
  power: 2.13,
  capacity: 4.39,
  totalCharge: 680.44,
  totalDischarge: 584.48,
  totalIncome: 46.72,
  yesterdayIncome: 2837.12
})
const earningsTime = ref(7)
const elQuanTime = ref(7)
const efficiencyTime = ref(30)
const times = [
  { label: '近七日', value: 7 },
  { label: '当月', value: 30 },
  { label: '当年', value: 365 },
  { label: '全部', value: 0 }
]
const earningsOptions = ref({
  yAxis: {
    name: '单位：收益/元'
  },
  xAxis: {
    data: ['08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08']
  },
  series: [{
    type: 'bar',
    barWidth: 40,
    data: [1500, 2000, 1800, 2500, 2200, 1900, 2100]
  }]
})
const elQuanOptions = ref({
  yAxis: {
    name: '单位：电量/kWh'
  },
  xAxis: {
    data: ['08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08']
  },
  series: [{
    name: '充电量',
    type: 'bar',
    data: [150, 200, 180, 250, 220, 190, 210],
    barWidth: 40,
    barGap: '0%',
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: '#046AF9',
        fontSize: 14
      }
    }
  }, {
    name: '放电量',
    type: 'bar',
    data: [120, 180, 160, 230, 200, 170, 190],
    itemStyle: {
      color: '#43B244',
      borderRadius: [2, 2, 0, 0]
    },
    barWidth: 40,
    barGap: '0%',
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: '#43B244',
        fontSize: 14
      }
    }
  }]
})
const efficiencyOptions = ref({
  yAxis: {
    name: '单位：电量/kWh'
  },
  xAxis: {
    data: ['08-02', '08-03', '08-04', '08-05', '08-06', '08-07', '08-08']
  },
  series: [{
    name: '充电量',
    type: 'bar',
    data: [150, 200, 180, 250, 220, 190, 210],
    barWidth: 40,
    barGap: '0%',
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: '#046AF9',
        fontSize: 14
      }
    }
  }, {
    name: '放电量',
    type: 'bar',
    data: [120, 180, 160, 230, 200, 170, 190],
    itemStyle: {
      color: '#43B244',
      borderRadius: [2, 2, 0, 0]
    },
    barWidth: 40,
    barGap: '0%',
    label: {
      show: true,
      position: 'top',
      textStyle: {
        color: '#43B244',
        fontSize: 14
      }
    }
  }]
})
const rankingData = ref([
  { name: '佛山明洋3号变（2500 kVA）2064k…', value: 8.67 },
  { name: '佛山明洋3号变（2500 kVA）2064k…', value: 8.67 },
  { name: '佛山明洋3号变（2500 kVA）2064k…', value: 8.67 },
  { name: '佛山明洋3号变（2500 kVA）2064k…', value: 8.67 },
  { name: '佛山明洋3号变（2500 kVA）2064k…', value: 8.67 }
])
</script>

<style lang="scss" scoped>
.siteOverview {
  .collect {
    padding: 0.24rem;
    display: flex;
    justify-content: space-between;
    background: #fff;

    .collect-item {
      width: 2.48rem;
      height: 1.27rem;
      background: #fff;
      text-align: center;
      border-radius: 0.08rem;
      padding-top: 0.2rem;

      .collect-item-value {
        font-size: 0.4rem;
        line-height: 0.6rem;
        color: #1D2129;
        font-weight: 900;
      }

      .collect-item-title {
        font-size: 0.16rem;
        line-height: 0.22rem;
        color: #1D2129;
        font-weight: 400;
        display: flex;
        justify-content: center;
        align-items: center;

        .el-icon {
          font-size: 0.14rem;
          color: #323D4B;
          margin-left: 0.08rem;
        }
      }
    }

    .collect-item:nth-child(odd) {
      background: linear-gradient(215.71deg, rgba(45, 192, 255, 0.5) 0.89%, rgba(230, 240, 254, 0.2) 95.79%),
        url('~@/assets/images/siteOverview/siteOverview_collect_bg1.png');
      background-size: 100% 100%;
    }

    .collect-item:nth-child(even) {
      background: linear-gradient(215.71deg, rgba(45, 78, 255, 0.5) 0.89%, rgba(230, 240, 254, 0.2) 95.79%),
        url('~@/assets/images/siteOverview/siteOverview_collect_bg2.png');
      background-size: 100% 100%;
    }
  }

  .earnings {
    padding: 0.12rem 0.24rem 0;
    background: #fff;
    margin-top: 0.12rem;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 0.4rem;

      .title {
        display: flex;
        align-items: center;

        .line {
          width: 0.03rem;
          height: 0.16rem;
          background: #046AF9;
          margin-right: 0.08rem;
          border-radius: 0.04rem;
        }

        .text {
          font-size: 0.16rem;
          line-height: 0.24rem;
          color: #1D2129;
          font-weight: 500;
        }
      }

    }

    .cont {
      height: 3.12rem;
      display: flex;

      .earningsCharts {
        flex: 1;
        height: 100%;
      }

      .ranking {
        margin-left: 0.1rem;
        width: 5.28rem;

        .title {
          display: flex;
          align-items: center;
          height: 0.45rem;

          img {
            width: 0.3rem;
            height: 0.3rem;
            margin-right: 0.08rem;
            margin-left: 0.24rem;
          }

          span {
            font-size: 0.16rem;
            color: #1D2129;
            font-weight: 500;
          }
        }

        .content {
          width: 4.6rem;
          height: 2.44rem;
          background: #F7F8FA;
          margin-left: 0.34rem;
          border-radius: 0.04rem;
          padding: 0.08rem 0.16rem;

          .ranking-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 0.16rem;
            height: 0.44rem;
            border-bottom: 0.01rem dashed #E5E6EA;
            margin-bottom: 0.04rem;

            .ranking-item-sort {
              width: 0.18rem;
              height: 0.18rem;
              border: 1px solid #9BC3FD;
              background: #E6F0FE;
              border-radius: 50%;
              font-size: 0.12rem;
              color: #046AF9;
              font-weight: 700;
              text-align: center;
              display: flex;
              justify-content: center;
              align-items: center;
            }

            .ranking-item-name {
              font-size: 0.16rem;
              color: #323D4B;
              font-weight: 400;
              width: 2.66rem;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .ranking-item-value {
              font-size: 0.16rem;
              color: #323D4B;
              font-weight: 700;
            }
          }

          .ranking-item:last-child {
            border-bottom: none;
          }
        }
      }
    }
  }
}
</style>
